<template>
  <TemplateTitle titleName="公司全年处理水量"></TemplateTitle>
  <div style="margin-top: -10rem; margin-bottom: 10rem">
    <chart-completion-status
      :chartData="chartDataList"
      xAxisName="name"
      :option="option"
      :chartType="chartType"
      :twoYAxis="false"
      :unit="unit"
      :seriesDataList="seriesDataList"
      :currentColorList="currentColorList"
      :orient="'horizontal'"
    ></chart-completion-status>
    <div class="legend">
      <p v-for="(item, index) in legendList" :key="index">
        <span :style="{ background: currentColorList[index] }"></span
        ><a>{{ item }}</a>
      </p>
    </div>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";
import moment from "moment";
import homeHttp from "@/https/home.js";
import { onMounted, ref, watch, inject } from "vue";
import ChartCompletionStatus from "./charts/ChartCompletionStatus.vue";
const legendList = ref([]);
const colorList = ref([
  "#63b2ee",
  "#76da91",
  "#f8cb7f",
  "#f89588",
  "#7cd6cf",
  "#7898e1",
  "#efa666",
  "#eddd86",
  "#9987ce",
  "#63b2ee",
  "#76da91",
  "#9192ab",
]);
const halfColorList = ref(["#76da91", "#9192ab"]);
const currentColorList = ref([]);
const seriesDataList = ref([]);
const chartDataList = ref([]);
// [
//     { time: '实际水量', bz1: '10', bz2: '4', bz3: '6', bz4: '9', bz5: '3', bz6: '3', bz7: '3', bz8: '3' },
//     { time: '目标水量(水务)', bz1: '10', bz2: '4', bz3: '6', bz4: '9', bz5: '3', bz6: '3', bz7: '3', bz8: '3' },
//     { time: '全年目标水量(水务)', up: '43', down: '33' },

// ]
const option = ref({});
const chartType = ref([]);
const unit = ref(["单位:万吨"]);

onMounted(() => {
  queryDisposeWater(moment().format("YYYY"));
});

const year = inject("currentDataYear");
watch(year, (val) => {
  console.log(val, "val");
  queryDisposeWater(val);
});
const queryDisposeWater = (year) => {
  let params = {
    year: year,
  };
  homeHttp.queryDisposeWater(params).then((res) => {
    if (res.data.code == 200) {
      let resObj = res.data.data;
      let list = [];
      let len = res.data.data.actualWaterList.length;
      let legArr = [];
      let seriesArr = [];
      let colorArr = [];
      let sjWater = {};
      sjWater.name = "实际水量";
      for (let i = 0; i <= len - 1; i++) {
        legArr.push(i + 1 + "月");
        seriesArr.push(`${i + 1}月`);
        colorArr.push(colorList.value[i]);
        sjWater[`${i + 1}月`] = resObj.actualWaterList[i];
      }
      list.push(sjWater);
      legArr = legArr.concat(["上半年", "下半年"]);
      seriesArr = seriesArr.concat(["上半年", "下半年"]);
      legendList.value = legArr;
      seriesDataList.value = seriesArr;
      currentColorList.value = colorArr.concat(halfColorList.value);

      let mbWater = {};
      mbWater.name = "目标水量(水务)";
      for (let i = 0; i <= len - 1; i++) {
        mbWater[`${i + 1}月`] = resObj.targetWaterList[i];
      }
      list.push(mbWater);

      list.push({
        name: "全年目标水量(水务)",
        上半年: resObj.firstHalfYearWater || 0,
        下半年: resObj.secondHalfYearWater || 0,
      });
      chartDataList.value = list;
    }
  });
};
</script>

<style scoped lang="less">
.legend {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20rem;
  padding: 0 20rem;

  p {
    color: #7190b6;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14rem;

    span {
      display: inline-block;
      width: 12rem;
      height: 12rem;
      border-radius: 6rem;
      margin-right: 4rem;
    }
  }
}
</style>
